﻿@model CQIE.OVS.Model.Activity

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>EditActive</title>
    <link href="~/kj/layui/css/layui.css" rel="stylesheet" />
    <link href="~/kj/layui/css/Mylabel.css" rel="stylesheet" />
    <style type="text/css">
        .color {
            color: #01AAED;
        }
    </style>
</head>
<body style="margin-left: 100px; margin-top: 50px;">
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    
    
    <form class="layui-form" action="#" method="post">
        @Html.AntiForgeryToken()
        <div class="form-horizontal" style="width: 600px;">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.ID)

            <div class="layui-form-item">
                @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "mylabel color" })
                <div class="layui-col-md7">
                    @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "layui-input" } })
                    @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                @Html.LabelFor(model => model.Info, htmlAttributes: new { @class = "mylabel color" })
                <div class="layui-col-md7">
                    @Html.TextAreaFor(model => model.Info, new { @class = "layui-textarea" })
                    @Html.ValidationMessageFor(model => model.Info, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="layui-form-item">
                @Html.LabelFor(model => model.DateStart, htmlAttributes: new { @class = "mylabel color" })
                <div class="layui-col-md7">
                    @Html.EditorFor(model => model.DateStart, new { htmlAttributes = new { @class = "layui-input" } })
                    @Html.ValidationMessageFor(model => model.DateStart, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="layui-form-item">
                @Html.LabelFor(model => model.DateEnd, htmlAttributes: new { @class = "mylabel color" })
                <div class="layui-col-md7">
                    @Html.EditorFor(model => model.DateEnd, new { htmlAttributes = new { @class = "layui-input" } })
                    @Html.ValidationMessageFor(model => model.DateEnd, "", new { @class = "text-danger" })
                </div>
            </div>

            <hr />
            <label class="mylabel color">选手信息</label>
            <div class="layui-col-md12">
                <table id="CamTable" class="layui-table" lay-filter="CamTable">
                </table>

                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>

                <div class="layui-form-item layui-col-md4 layui-col-md-offset1">
                    <div class="layui-input-line">
                        <button class="layui-btn" type="submit" lay-submit lay-filter="formDemo">立即保存</button>
                    </div>
                </div>

            </div>
        </div>
    </form>
        

<script src="~/kj/layui/layui.js"></script>
<script>
    layui.use(['form', 'laydate', 'layer', 'jquery', 'table'],
        function() {
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var $ = layui.jquery;
            var table = layui.table;

            //表格渲染
            function tablerender() {
                table.render({
                    elem: '#CamTable'
                    , height: 300
                    , url: '/Active/GetActiveCam' //数据接口
                    , where: {Aid:$('#ID').val()}
                    , page: true //开启分页
                    , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    , id:'Id'
                    , cols: [
                        [//表头
                            { type: 'checkbox', align: 'center',width: 48 },
                            { align:'center', type: 'numbers', width: 40},
                            { field: 'Name', title: '名称', width: 86, align: 'center'},
                            { field: 'Info', title: '简介', width: 145, align: 'center' },
                            { field: 'Sex', title: '性别', width: 60, align: 'center' },
                            { field: 'Age', title: '年龄', width: 60, align: 'center' },
                            { title: '操作', width: 153, align: 'center', toolbar: '#barDemo' }
                        ]
                    ], parseData: function(res) { //res 即为原始返回的数据
                        console.log(res);
                        return {
                            "code": res.status, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.data //解析数据列表
                        };
                    }
                });
            }

            //删除选手
            function DeleteCam(id) {
                $.post('/Cam/DeleteCam',
                    { Id : id },
                    function() {
                        layer.msg('删除成功');
                        tablerender();
                    });
            }

            tablerender();

            $("#addUser").click(function() {
                layer.open({
                    type: 1,
                    title: '添加选手',
                    area: ['400px', '500px'],
                    resize: false,
                    anim: 1,
                    btnAlign: 'c',
                    btn: ['添加', '取消'],
                    btn1: function(index, layero) {
                        cname = $('[name=Cname]').val();
                        cage = $('[name=Age]').val();
                        csex = $('[name=sex]').val();
                        cinfo = $('[name=CamInfo]').val();
                        console.log(cinfo);
                        var tr = '<tr><td>' +
                            cname +
                            '</td><td>' +
                            cage +
                            '</td><td>' +
                            csex +
                            '</td><td>' +
                            cinfo +
                            '</td>' +
                            '<td class="selected"><button type="button" onclick="delUser(this);" id="removeUser" class="layui-btn layui-btn-sm layui-col-md-offset5"><i class="layui-icon">&#xe640;</i></button></td></tr>';
                        $('#tbody').append(tr);
                        layer.msg("添加成功！");
                        layer.close(index);
                    },
                    btn2: function() {
                        layer.close();
                    },
                    skin: 'layui-layer-molv',
                    content:
                        '<div class="layui-form-item"><h1>添加选手</h1><br/><label class="layui-form-label">选手姓名</label><div class="layui-inline"><input type="text" class="layui-input" name="Cname" /></div></div><div class="layui-form-item  "><label class="layui-form-label">年龄</label><div class="layui-input-inline layui-col-md4"><input type="text" class="layui-input" name="Age"/></div></div><div class="layui-form"><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-inline"><input type="radio" name="sex" value="男" title="男" checked><input type="radio" name="sex" value="女" title="女"></div></div></div><div class="layui-form-item"><label class="layui-form-label">选手简介</label><div class="layui-input-inline layui-col-md4"><textarea name="CamInfo" placeholder="请输入内容" class="layui-textarea"></textarea></div></div>',
                    success: function() {
                        form.render();
                    }
                });
            });

            laydate.render({
                elem: '#DateStart' //指定元素
                ,format: 'yyyy/MM/dd HH:mm:ss'
            });

            laydate.render({
                elem: '#DateEnd' //指定元素
                , format: 'yyyy/MM/dd HH:mm:ss'

            });


            //监听操作栏事件
            table.on('tool(CamTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'detail'){
                    layer.open({
                        type: 2
                        , title: '选手信息'
                        , content: '/Cam/DetailCam?Id=' + data.Id
                        , area:['400px','480px']
                        , btn: ['返回']
                        , resize:false 
                        , btn1: function(index) {
                            layer.close(index);
                        }
                    });
                } else if(layEvent === 'del'){
                    layer.confirm('确认删除'+ data.Name +'？', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        DeleteCam(data.Id);
                    });
                } else if (layEvent === 'edit') {
                    layer.open({
                        type: 2
                        , title: '编辑'
                        , content: '/Cam/Edit?Id='+data.Id
                        , area: ['542px', '513px']
                        , resize: false 
                        , end: function() {
                            tablerender();
                        }
                    });
                }
            });


            //监听头工具栏事件
            table.on('toolbar(CamTable)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                case 'add':
                    layer.open({
                        type: 1
                        , title: '添加选手'
                        , area: ['400px', '500px']
                        , resize: false
                        , anim: 1
                        , btnAlign: 'c'
                        , btn: ['添加', '取消']
                        , content:
                            '<div class="layui-form-item"><h1>添加选手</h1><br/><label class="layui-form-label">选手姓名</label><div class="layui-inline"><input type="text" class="layui-input" name="Cname" /></div></div><div class="layui-form-item  "><label class="layui-form-label">年龄</label><div class="layui-input-inline layui-col-md4"><input type="text" class="layui-input" name="Age"/></div></div><div class="layui-form"><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-inline"><input type="radio" name="sex" value="男" title="男" checked><input type="radio" name="sex" value="女" title="女"></div></div></div><div class="layui-form-item"><label class="layui-form-label">选手简介</label><div class="layui-input-inline layui-col-md4"><textarea name="CamInfo" placeholder="请输入内容" class="layui-textarea"></textarea></div></div>'
                        , success: function() {
                            form.render();
                        }
                        , btn1: function (index, layro) {
                            Camdata = {
                                'Name': $('[name=Cname]').val(),
                                'Age': $('[name=Age]').val(),
                                'Sex': $('[name=sex]').val(),
                                'Info': $('[name=CamInfo]').val(),
                                'ActiveId':$('#ID').val()
                            };

                            $.post(
                                '/Cam/CreateCam'
                                , { Camdata: Camdata }
                                , function() {
                                    tablerender();
                                }
                            );
                           
                            layer.close(index);
                        }
                    });
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        console.log(data);
                        layer.msg('删除');
                        $.each(data,
                            function() {
                                DeleteCam(this.Id);
                            });
                    }
                    break;
                };
            });

            laydate.render({
                elem: '#stime' //指定元素
            });

            laydate.render({
                elem: '#etime' //指定元素
            });

            form.on('submit(formDemo)', function (data) {
                
                model = {
                    'ID':$('#ID').val(),
                    'Title': $('#Title').val(),
                    'DateStart': $('#DateStart').val(),
                    'DateEnd': $('#DateEnd').val(),
                    'Info': $('#Info').val(),
                    'IsAlive':1
                };
                $.post('/Active/EditActive', { model: model }, function() {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                });
                layer.msg('修改成功！');                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                return false;
            });
        });
</script>
</body>
</html>
